<template>
  <a-modal
    style="width: 50%"
    :title="titleMap[mode]"
    :visible="visible"
    :confirm-loading="confirmLoading"
    :destroyOnClose="true"
    @cancel="handleCancel"
    :maskClosable="maskClosable">
    <div style="margin-top: 12px;">
      <a-form :form="form">
        <dynamicRelevancy :title="`${PARTONE}`" :arr="indicatorIds" ref="dynamicRelevancy" />
      </a-form>
    </div>
    <template slot="footer">
      <a-button key="back" @click="handleCancel">
        关闭
      </a-button>
      <a-button type="primary" :visible="visibleBtn" :loading="loadingBtn" @click="handleSubmit">
        保存
      </a-button>
    </template>
  </a-modal>
</template>

<script>
import dynamicRelevancy from './dynamicRelevancy'
import { addAssociations, editAssociations, detailAssociations } from '@/api/budget'
const PARTONE = 'partOne'

export default {
    components: { dynamicRelevancy },
    data () {
        return {
            form: this.$form.createForm(this),
            PARTONE,
            visible: false,
            confirmLoading: false,
            loading: false,
            visibleBtn: false,
            loadingBtn: false,
            maskClosable: true,
            addForm: {
                budgetProjectId: '',
                indicatorIds: []//	指标数据
            },
            indicatorIds: [
                // {
                //     indicatorId: "",//指标Id
                //     proportion: "",//指标占比比重
                // }
            ],
            mode: 'add',
            titleMap: {
                add: '新增预算项目与指标关联',
                edit: '更新预算项目与指标关联'
            },
            //  表单样式
            labelCol: {
                xs: { span: 24 },
                sm: { span: 5 }
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 }
            },
            rowData: ''
        }
    },
    mounted () {
        // this.$on('open', (val) => {
        //     this.openAction(val);
        // });
    },
    methods: {
        // 显示
        open (mode = 'add') {
            this.mode = mode
            this.indicatorIds = []
            this.$nextTick(() => {
                this.$refs.dynamicRelevancy.init()
            })
            this.visible = true
            console.log(this.visible)
            return this
        },
        // 获取行数据和id
        setData (row) {
            this.rowData = row
            if (this.mode == 'edit') {
                detailAssociations(row.projectId).then(res => {
                    if (res.code == 200) {
                        const data = res.data
                        // this.form.setFieldsValue({
                        //     indicatorId: data.indicatorId,
                        //     proportion: data.proportion,
                        // })
                        this.indicatorIds = data
                        this.$nextTick(() => {
                            this.$refs.dynamicRelevancy.init()
                        })
                        this.addForm = res.data
                    }
                    console.log(res)
                })
            }
            console.log(row)
        },
        // 关闭
        handleCancel () {
            this.visible = false
            this.loadingBtn = false
            this.visibleBtn = false
            this.maskClosable = false
            this.indicatorIds = [
                // {
                //     indicatorId: "",//指标Id
                //     proportion: "",//指标占比比重
                // }
            ]
            this.addForm = {
                budgetProjectId: '',
                indicatorIds: []//	指标数据
            }
            this.mode = 'add'
            this.$emit('close')
        },
        // 提交
        handleSubmit () {
            const { form: { validateFields } } = this
            const _this = this
            this.loadingBtn = true
            this.visibleBtn = true
            validateFields((errors, values) => {
                if (!errors) {
                    const partOneArr = []
                    this.addForm = values
                    values[`${PARTONE}indicatorId`].forEach((item, index) => {
                        const obj = {
                            indicatorId: Number(values[`${PARTONE}indicatorId`][index]),
                            proportion: values[`${PARTONE}proportion`][index]
                        }
                        partOneArr.push(obj)
                    })
                    this.addForm.indicatorIds = partOneArr
                    this.addForm.budgetProjectId = this.rowData.projectId
                    const Api = this.mode == 'add' ? addAssociations : editAssociations
                    Api(this.addForm).then(res => {
                        console.log(res)
                        if (res.code === 200) {
                            _this.$notification['success']({
                                message: '提示',
                                description: '保存成功！',
                                duration: 8
                            })
                            _this.visible = false
                            _this.$emit('success')
                        } else {
                            _this.$notification['error']({
                                message: '提示',
                                description: res.message,
                                duration: 8
                            })
                        }
                        _this.visibleBtn = false
                        _this.loadingBtn = false
                    }).finally(res => {
                        _this.loadingBtn = false
                        _this.visibleBtn = false
                    })
                } else {
                    this.loadingBtn = false
                    this.visibleBtn = false
                }
            })
        }
    }
}
</script>
